<template>
	<view>
		<!-- 页首 -->
		<zw-header ref="header"></zw-header>
		<!-- 商品类别及轮播图 -->
		<cate></cate>
		<!-- 右侧工具栏 -->
		<tool-bar :scrollTop="scrollTop"></tool-bar>
		
		<u-sticky offset-top='100'>
			<view class="cateHead">
				<view class="cateMini">
					<view class="cateMiniRow" v-for="(cate,index) in categories" :key="index" v-if="index < 6" @click="handleSelectCate(cate,index)">
						<view class="cateMiniBox" :class="current == index ? 'selectCate':''">
							<image :src="cate.logoUrl" ></image>
							<text class="clamp-1" :class="current == index ? 'selectCateText':''">{{cate.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="goodBox wrap" >
			<view class="goodsList"  >
				<view class="goodsMain">
					<view class="goodsItem"  v-for="(goods,i) in goodsList" :key="i">
						<a :href="`#/pages/goods/index?id=${goods.id}`" target="_blank" >
							<u-lazy-load
							 :image="goods.logoUrl" 
							 img-mode="widthFix"
							 :duration='100'
							 ></u-lazy-load>
							
							<view class="goodsName elip_2">
								<text v-if="goods.name.length<15">{{goods.name}}<text class="nbsp">商品名称占位修饰商品名称占位修饰</text></text>
								<text v-else>{{goods.name}}</text>
							</view>
							<view class="goodsPrice">
								<text class="price">
									¥<text class="priceBox">{{goods.price}}</text>
									<!-- <text class="market" v-if="goods.agencyPrice">¥{{goods.agencyPrice}} 代理商专属价</text> -->
								</text>
							</view>
							<view class="goodsTip">
								<!-- <text>{{goods.sellNum}}人付款</text> -->
								<text class="elip_1">{{goods.sellerName}}</text>
							</view>
							<view class="goodsZw"></view>
						</a>
					</view>
				</view>
				<view class="goods-empty" v-if="goodsList.length == 0">
					<image src="/static/image/common/nullInfo.png" mode='widthFix'></image>
					暂无商品~
				</view>
			</view>
		</view>
		<!-- <view class="bottomImg">
			<image src="../static/image/home/7.png" mode="heightFix"></image>
			<image src="../static/image/home/6.png" mode="heightFix"></image>
			<image src="../static/image/home/5.png" mode="heightFix"></image>
			<image src="../static/image/home/4.png" mode="heightFix"></image>
		</view> -->
		<!-- 占位 -->
		<!-- <view class="pageZW"></view> -->

		<!-- 页脚 -->
		<zw-footer :footerInfo='footerInfo'></zw-footer>

	</view>
</template>

<script>
	// import hero from '@/components/home/hero.vue';
	import cate from '@/components/home/cate.vue';
	import heroSub from '@/components/home/hero-sub.vue';
	import toolBar from '@/components/home/tool-bar.vue';
	import flashSale from '@/components/home/flash-sale.vue';
	import banner from '@/components/home/banner.vue';
	import brick from '@/components/home/brick.vue';
	import videoBox from '@/components/home/video-box.vue';
	import LazyLoad from '@/common/tools/lazyload.js';
	import {
		getAccToken,
		removeAccToken,
		removeRefToken
	} from '@/userToken.js'
	import {
		encrypt,
		decrypt
	} from '@/utils/jsencrypt';
	export default {
		components: {
			// hero,
			heroSub,
			toolBar,
			flashSale,
			banner,
			brick,
			videoBox,
			cate
		},
		data() {
			return {
				loading:true,
				topBanner: null,
				scrollTop: 0,
				adverts: [],
				brickCategories: [],
				goodsList:[],
				userInfo:{},
				categories:'',
				current:'',
				cateId:'',
				footerInfo:{},
				pageNum:1,
				currentMax:0
			}
		},
		onLoad() {
			this.initFilters()
		},
		onShow() {
			// 监听滚动
			window.addEventListener('scroll', this.onScroll);
			this.userInfo =  uni.getStorageSync('userInfo')
			if(this.userInfo.id){
				this.getNum()
			}
			this.init()
			
		},
		onHide() {
			// 取消滚动监听
			window.removeEventListener('scroll', this.onScroll);
		},
		onReachBottom() {
			if (this.pageNum < this.currentMax) {
				this.pageNum++;
				this.getList();
			} else {
				
			}
		},
		
		methods: {
			/**
			 * 解决onPageScroll有时不触发的问题
			 */
			onScroll() {
				this.scrollTop = window.scrollY;
			},
			init(){
				uni.request({
					url: this.serverUrl + '/user/information/list',
					method: 'GET',
					header: {
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							var footerInfo = res.data.data[0]
							this.footerInfo = footerInfo
							uni.setStorageSync('footerInfo', footerInfo)
						} 
					}
				})
			},
			//购物车数量
			getNum(){
				this.uni_request({
					url:'/user/shopCart/sellerCartNum',
					method:'POST',
					success:(res) => {
						if(res.data.code == 0 || res.data.code == 200){
							this.resetSetItem('sellerCartNum', res.data.num);
						}else{
							uni.showToast({
								icon:"none",
								title:res.data.msg
							})
						}
					}
				})
			},
			toList(item){
				if(item.cateId){
					uni.navigateTo({
						url:'/pages/goods/discountList?cateId='+item.cateId
					})
				}
			},
			
			//获取首页展示分类
			initFilters() {
				uni.request({
					url: this.serverUrl + '/goods/category/homeDisplay',
					method: 'GET',
					header: {
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.categories = res.data.data
							this.cateId = this.categories[0].id
							this.getList()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			//切换分类
			handleSelectCate(item,index){
				this.current = index;
				this.cateId = item.id;
				this.goodsList = [];
				this.pageNum = 1
				this.getList()
				uni.pageScrollTo({
					scrollTop: 500,
					duration: 100
				});
			},
			getList(){
				var that = this
				var params = {
					pageSize:18,
					pageNum:this.pageNum
				}
				if(this.cateId){
					params.categoryFirst = this.cateId
				}
				
				uni.request({
					url: this.serverUrl + '/goods/list',
					data:params,
					method: 'GET',	
					header:{
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							that.currentMax = Math.ceil(res.data.total / 10);
							var data = res.data.rows;
							for (var i = 0; i < data.length; i++) {
								that.goodsList.push(data[i])
							}
						} else {
							
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			
			toDetail(url){
				uni.navigateTo({
					url:url
				})
			},
			
			
		}
	}
</script>
<style lang="scss">
	.nbsp{opacity: 0;}
	.container {
			padding: 20rpx 60rpx;
		}
	
		.userinfo {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	
		.userinfo-avatar {
			width: 128rpx;
			height: 128rpx;
			margin: 20rpx;
			border-radius: 50%;
		}
	
		.lists {
			margin: 10px 0;
		}
	.pageZW{
		max-width: 1200px;
		min-width: 1200px;
		height: 60px;
	}
	.bottomImg{
		max-width: $page-width;
		min-width: $page-minwidth;
		margin: 30px auto;
		padding:0 20px;
		@extend %flex-align-center;
		justify-content: space-around;
		image{
			height: 55px
		}
	}
	.goodBox {
		max-width: $page-width;
		min-width: $page-minwidth;
		margin: 0 8vw;
		overflow: hidden !important;
		background: #ffffff;
		.goodsList{
			min-height: 700px;
			max-width: $page-width;
			min-width: $page-minwidth;
			padding: 10px 0;
			.goodsMain{
				display: grid;
				grid-template-columns: repeat(6, 1fr); /* 6列，每列等宽 */
				grid-gap: 20px;
				column-gap:20px;
				max-width: calc($page-width - 20px);
				min-width: calc( $page-minwidth - 20px);
				padding: 0 10px;
				.goodsItem{
					position: relative;overflow: hidden;border-radius: 8px;
					display: flex;align-items: center;flex-direction: column;
					width: 100%;background-color: #ffffff;
					cursor: pointer;
					image{
						aspect-ratio: 1 / 1;
					}
					.goodsName{
						color: #4f4f4f;font-size: 15px;
						width: calc(100% - 10px);margin: 5px;
						min-height: 40px;
						display: flex;justify-content: flex-start;align-items: center;
					}
					.goodsTip{
						display: flex;justify-content: space-between;align-items: center;
						padding: 0 10px;color: #999;font-size: 12px;position: absolute;
						bottom:16px;width: calc(100% - 20px);
					}
					.goodsZw{
						height: 10px;
						
					}
					.goodsPrice{
						padding: 5px 10px;width: calc(100% - 20px);
						display: flex;justify-content: flex-start;align-items: center;
						.price{
							color: $color-primary;font-size: 16px; font-weight: 700;
						}
						.priceBox{font-size: 22px; font-weight: 700;margin-left: 2px;}
						.market{
							background: rgb(253, 226, 94);
							color: #633b14;
							font-size: 12px;
							padding: 1px 2px;
							border-radius: 3px;
							margin-left: 8px;
						}
					}
				}
				.goodsItem:hover{
					border: 1px solid $color-primary;
					transform: scale(1.02);
					box-shadow: 0 5px 10px rgba(244, 104, 10, 0.1);
				}
			}
		}
	}
	.goods-empty {
		color: $text-color;
		height: 650px;
		width: 100%;color: #999;
		display: flex;align-items: center;justify-content: center;flex-direction: column;
	}
	/* 设置背景 */
	body {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-size: cover;
	}
	
	.cateHead{
		background: #fff;
		padding: 0 8vw;
	}
	.cateMini{
		padding: 10px;
		max-width: $page-width;
		min-width: $page-minwidth;
		display: flex;
		.cateMiniRow{
			display: inline-block;margin-right: 10px;
			.cateMiniBox{
				@extend %flex-align-center;padding:1px 8px 1px 5px ;border-radius: 5px;
				cursor: pointer;color: rgba(0,0,0,0.8);margin-right: 5px;
				text{font-size: 15px;}
				image{width: 30px;height: 30px;border-radius: 20px;border: 2px solid rgba(#ff0000,.01);}
			}
			.cateMiniBox:hover{
				color: #ff5000 !important;
			}
		}
		.selectCate{background-color: #fff1eb; }
		.selectCateText{color: #ff5000 !important; font-weight: 600;}
	}	
</style>